<template>
<div class="one" ref="one">
    <div class="title">
        服务客户
    </div>
    <div class="content">
        智能化平台帮您运营您的客户
    </div>
    <div class="img">
        <img src="@/assets/photo/one.png" alt="">
    </div>
</div>
</template>

<script>
import {start_to_end} from '@/assets/tools/public_tools';
export default {
    name: 'One',
    props:{
        back_top:{
            type:Boolean,
            default:false,
        },
    },
    watch:{
        back_top(){
            if(this.back_top){
                this.on_back_top();
            }
        },
    },
    methods:{
        on_back_top(){
            let _top = document.documentElement.scrollTop + this.$refs.one.getBoundingClientRect().top - 85;
            start_to_end(document.documentElement.scrollTop,_top-5,300);
        },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.one{
    width: 100%;
    background-color: #fcfcfc;
    display: flex;
    flex-direction: column;
    align-items:center;
    >.title{
        width: 100%;
        text-align: center;
        font-size: 32px;
        margin-bottom: 30px;
        font-weight: 600;
    }
    >.content{
        width: 100%;
        text-align: center;
        font-size: 24px;
        margin-bottom: 60px;
    }
    >.img{
        max-width: 1000px;
        width:100%;
        border-radius: 5px;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
}
</style>
